import React, { PureComponent } from 'react';
import {

    Table,
    Card,
    Button,
    Icon,
    Popconfirm,
    Divider,
    message

} from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
import styles from '../../../Repair.less';
import EmergAddEquipOther from './EmergAddEquipOther'
@connect(({ emergency, loading }) => ({
    EquipOtherList: emergency.EquipOtherList,
    loading: loading.effects['emergency/fetchEmergencyQueryEquipOther'],
}))

export default class EmergPersonDetail extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
        };
        // this.dispatch = this.props.dispatch;
        this.routeParams = this.props.match.params;
    }
    returnColumn = () => {
        return [
            {
                title: '序号',
                dataIndex: 'Id',
                render: (text, record, index) => `${index + 1}`,
                width: 50,

            },
            {
                title: '名称',
                width: 100,
                key: 'mc',
                dataIndex: 'mc',


            },
            {
                title: '类型',
                key: 'lx',
                dataIndex: 'lx',


            },
            {
                title: '数量',
                key: 'sl',
                dataIndex: 'sl',


            },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 200,
                render: (text, record) =>
                    <>

                        <a href="javascrips:;" onClick={() => {
                            this["AddForm"].setState({ visible: true },()=>{
                                this["AddForm"].setFormValues({values:record});
                            });
                            
                        }}>

                            <Icon type="edit" />
                            编辑
                      </a>
                        <Divider type="vertical" />
                        <Popconfirm title="确定删除?" onConfirm={this.handleDelete.bind(this, record)}>
                            <a href="javascript:;">
                                <Icon type="delete" />
                                删除
                        </a>
                        </Popconfirm>
                    </>
            }
        ];
    }
    fetchEmergencyQueryEquipOther = ({ id = null } = {}) => {
        this.props.dispatch({
            type: 'emergency/fetchEmergencyQueryEquipOther',
            payload: {
                id: id,
            },
            callback: response => {
                if (response.ErrorMessage) {
                    message.error.error('获取人员表失败');
                    console.log(response.ErrorMessage);
                }
            },
        });
    };
    fetchEmergencyDeleteEquipOther = ({ id = null } = {}) => {
        const hide = message.loading('正在删除...', 0);
        this.props.dispatch({
            type: 'emergency/fetchEmergencyDeleteEquipOther',
            payload: {
                id: id,
            },
            callback: response => {
                hide();
                if (response.status) {
                    message.success('删除成功');
                    this.fetchEmergencyQueryEquipOther({ id: this.routeParams.id });
                } else {
                    message.error('删除失败');
                    console.log(response.ErrorMessage);
                }
            },
        });
    }
    OnRef = ({ ref = null, type = null } = {}) => {

        this[type] = ref;

    }
    handleDelete = (record) => {

        this.fetchEmergencyDeleteEquipOther({ id: record.mxid });
    }
    componentDidMount = () => {
        !this.props.EquipOtherList && this.fetchEmergencyQueryEquipOther({ id: this.routeParams.id });
    }
    render() {
        const { EquipOtherList, loading } = this.props
        return (<>
            <Card style={{ margin: '10px' }}> <Button
                type="primary"
                onClick={() => {
                    this["AddForm"].setState({ visible: true });
                }}
            >
                新增
            </Button></Card>
            <Card
                title={
                    <span style={{ borderLeft: '4px solid #3CB371', paddingLeft: '10px' }}>
                        详细人员表
        </span>
                }
                style={{ margin: '10px' }}
            >          <Table
                    className={styles.RepairTable}
                    size="small"
                    align={'center'}
                    loading={loading}
                    bordered
                    dataSource={EquipOtherList}
                    columns={this.returnColumn()}
                />
                <EmergAddEquipOther zbbid={this.routeParams.id} OnRef={this.OnRef} fetchEmergencyQueryEquipOther={() => { this.fetchEmergencyQueryEquipOther({ id: this.routeParams.id }) }} />
            </Card>
        </>)
    }
}